<template>
  <div class="read-card-box">
    <img class="image" :src="props.book.imgUrl" alt="">

    <div class="read-card-theme">

    </div>

    <div class="read-card-name">
      {{ props.book.name }}
    </div>
  </div>
</template>

<script lang="ts" setup>

import {reactive} from "vue";

const item = reactive({
  imgUrl: '../src/assets/images/book2.jpg',
  btnText: "READ",
  name: '人间欢喜'
})

const props = defineProps({
  book: {
    required: true,
  }
})

</script>

<style lang="less" scoped>
.read-card-box {
  width: 100%;
  border-radius: 15px;
  position: relative;
  padding: 0 2px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.3);
  box-shadow: rgba(50, 50, 93, 0.25) 0 50px 100px -20px,
  rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
  rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;

  .image {
    //height: 190px;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;

  }

  .read-card-theme {
    width: 100%;
    height: 20%;
    position: absolute;
    bottom: 0;
    left:1px;
    border-radius: 0 0 15px 15px;
    margin-top: 2px;
    backdrop-filter: blur(5px);
    z-index: 1;
  }



  .read-card-button:hover {
    cursor: pointer;
    box-shadow: -5px 5px 5px rgba(110, 101, 101, 0.3);
  }

  .read-card-name {
    width: 100%;
    position: absolute;
    left: 2px;
    bottom: 15px;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    z-index: 10;
  }
}
</style>